<template>
	<loading-page v-if="showSkeleton" :transparent="data.loadingTransparent" />
	<view class="selects">
		<!-- 服务类型 -->
		<u-select class="u-select" type="task_status" :value="task_status.value" :list="task_status.list" @callback="callbackSelect" />
		<!-- 排序 -->
		<!-- <u-select class="u-select" type="order" :value="order.value" :list="order.list" @callback="callbackSelect" /> -->
		<!-- 价格 -->
		<!-- <u-select class="u-select" type="price" :value="price.value" :list="price.list" @callback="callbackSelect" /> -->
	</view>
	<!-- list -->
	<view class="list">
		<template v-for="(item,index) in dataList" :key="index">
			<list-needs-item :item="item" :index="index" />
		</template>
	</view>
	<!-- 无数据 -->
	<empty v-if="!dataList.length&&!showSkeleton" />
	<!-- 更多数据 -->
	<uni-load-more :status="loadMore.status" v-if="loadMore.show" :contentText="loadMore.txt"></uni-load-more>
	<!-- 发布悬赏 -->
	<task-add-btn from="task" />
</template>
<script setup>
	import { ref, reactive, watch, defineComponent } from 'vue';
	import { onLoad, onTabItemTap, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import listNeedsItem from './components/list-needs-item.vue';
	import taskAddBtn from './components/task-add-btn.vue';
	import useGetList from '@/common/hooks/useGetList.js';
	import useSelect from './components/useSelect.js';
	defineComponent({
		listNeedsItem,
		taskAddBtn
	});
	onLoad(() => {
		init(false);
	});
	onTabItemTap(() => {
		if (data.loadingTransparent) {
			showSkeleton.value = true;
			init(false);
		}
	});
	onReachBottom(() => {
		reachBottom();
	});
	onPullDownRefresh(() => {
		pullDownRefresh();
	});
	uni.$on('CLOSETASK', () => {
		pullDownRefresh();
	});
	const defaultParams = {
		task_type: 'all',
		task_cate: 'all'
	};
	const data = reactive({
		searchParams: defaultParams,
		loadingTransparent: false
	});
	const { getDataList, dataList, page, loadMore, showSkeleton, reachBottom, pullDownRefresh } = useGetList();
	const { params, task_status, order, price, callbackSelect, searchChange } = useSelect();
	watch(params, (newVal, oldVal) => {
		data.searchParams = Object.assign(defaultParams, newVal);
		if (oldVal) init(false);
	}, { immediate: true, deep: true });
	// 初始化数据
	async function init(showLoading = true) {
		await getDataList({
			url: '/crm/task/salle',
			params: {
				...data.searchParams
			},
			showLoading: showLoading
		});
		data.loadingTransparent = true;
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.selects {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 9;
		@include flex(row, flex-start);
		padding: 4rpx 28rpx;
		background-color: #F3F5F7;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			height: 100%;
			background-color: #F3F5F7;
		}
		.u-select {
			margin: 0 50rpx 0 0;
		}
	}
	.list {
		padding: 0 28rpx;
	}
</style>
